<template>
  <section class="main">
    <a-card :bordered="false" title="BMI曲线">
      <template slot="extra">
        <a-button
          v-for="item in duringTime"
          :key="item.value"
          :type="queryParam.period == item.value ? 'danger' : ''"
          :style="{ marginLeft: '7px' }"
          @click="loadData(item.value)"
          >{{ item.text }}</a-button
        >
      </template>
      <template v-if="charts.axisData.length > 0">
        <line-charts
          :key="initCharts"
          :x-axis-data="charts.axisData"
          :y-axis-unit="charts.axisUnit"
          :visual-map="charts.visualMap"
          :legend="charts.legend"
          :show-legend-arr="charts.showLegend"
          :series-data="charts.seriesData"
          :add-line="true"
          :line-style="charts.lineStyle"
          :add-area="true"
          :area-style="charts.areaStyle"
        />
      </template>
      <template v-else>
        <div class="no-data"><a-icon type="frown-o" />暂无数据</div>
      </template>
    </a-card>

    <!-- <a-card style="margin-top: 24px" :bordered="false" title="BMI统计">
      <template slot="extra">
        <a-button
          v-for="item in duringTime"
          :key="item.value"
          :type="queryParam.period == item.value ? 'danger' : ''"
          :style="{ marginLeft: '7px' }"
          @click="loadData(item.value)"
          >{{ item.text }}</a-button
        >
      </template>
      <div class="no-data"><a-icon type="frown-o" />暂无数据</div>
    </a-card> -->

    <a-card style="margin-top: 24px" :bordered="false" title="BMI列表">
      <template slot="extra">
        <a-button
          v-for="item in duringTime"
          :key="item.value"
          :type="queryParam.period == item.value ? 'danger' : ''"
          :style="{ marginLeft: '7px' }"
          @click="loadData(item.value)"
          >{{ item.text }}</a-button
        >
      </template>
      <div style="margin-bottom: 20px; display: flex; justify-content: flex-end">
        <a-button type="primary" @click="handleAdd">添加</a-button>
      </div>
      <template v-if="listDataSource.length > 0">
        <a-table
          ref="table"
          bordered
          size="middle"
          rowKey="date"
          :columns="listColumns"
          :dataSource="listDataSource"
          :pagination="ipagination"
          :loading="listDataLoading"
          @change="
            (pagination, filters, sorter, currentDataSource) =>
              handleTableChange(pagination, filters, sorter, currentDataSource, 'getList')
          "
        >
        </a-table>
      </template>
      <template v-else>
        <div class="no-data"><a-icon type="frown-o" />暂无数据</div>
      </template>

      <b-m-i-modal ref="modalForm" @ok="modalFormOk"></b-m-i-modal>
    </a-card>
  </section>
</template>

<script>
import { BloodProfileMixin } from '@/mixins/BloodProfileMixin'
import LineCharts from '@/views/bloodProfile/components/LineChart'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import BMIModal from './modules/BMIModal'

const listColumns = [
  {
    title: '日期/监测项',
    align: 'center',
    dataIndex: 'date',
    width: 120
  },
  {
    title: '身高（CM）',
    align: 'center',
    dataIndex: 'height',
    width: 120
  },
  {
    title: '体重（KG）',
    align: 'center',
    dataIndex: 'weight',
    width: 120
  },
  {
    title: 'BMI',
    align: 'center',
    dataIndex: 'bmi',
    width: 120
  }
  // {
  //   title: '测量备注',
  //   align: 'center',
  //   dataIndex: 'foodRecordRemark'
  // }
]
export default {
  name: 'BMI',
  mixins: [BloodProfileMixin],
  components: { VeLine, LineCharts, BMIModal },
  data() {
    return {
      initCharts: 'init',
      queryParam: { patientId: this.$route.query[PAGE_MENU_TYPE.PatientId], type: 3, period: 0 },
      listColumns,
      charts: {
        visualMap: {
          top: 0,
          right: 30,
          align: 'left',
          orient: 'horizontal',
          precision: 1,
          pieces: [
            {
              gt: 10,
              lte: 18,
              color: '#e88327'
            },
            {
              gt: 18,
              lte: 24,
              color: '#00d570'
            },
            {
              gt: 24,
              lte: 30,
              color: '#fb0b0a'
            }
          ],
          outOfRange: {
            color: '#999'
          }
        },
        axisData: [],
        axisUnit: '',
        legend: ['BMI', '体重'],
        showLegend: [],
        seriesData: [],
        lineStyle: [
          {
            index: 0,
            lineColor: '#f06980',
            textColor: '#4d4d4d',
            data: [18, 24]
          }
        ],
        areaStyle: {
          color: '#F2F2F2',
          data: [18, 24]
        }
      },
      url: {
        // 根据时段与时间周期查询BMI记录
        getCharts: '/101/06/1010601',
        // 按日期分组获取患者BMI记录
        getList: '/101/06/1010602',
        // 查询BMI统计数据 按照BMI记录类别进行统计
        getStatisics: '/101/01/1010103'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.no-data {
  color: rgba(0, 0, 0, 0.25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}
</style>

